<template>
  <div id="page-personal-info">
    <div class="info_breadcrumb">位置：个人信息</div>
    <div class="info_center">
      <div class="info_title">
        <span class="regtime">注册时间：{{ this.infoForm.addTime }}</span>
        <span class="state">账号状态：{{ this.infoForm.userStatus }}</span>
      </div>
      <!-- 头像修改 -->
      <div class="portrait">
        <div class="pic">
          <img :src="infoForm.userpic" alt/>
          <!-- <div class="pic_hover" @click="picVisible = true">
            <p>修改头像</p>
          </div> -->
        </div>
      </div>
      <!-- 基本信息修改 -->
      <div class="info_alter">
        <p class="alter_title">基本信息</p>
        <el-form class="alter_from" :ref="infoForm" :model="infoForm" label-width="80px">
          <el-form-item label="登陆手机">
            <span class="item_txt">{{ this.tel.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2") }}</span>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="infoForm.nickname" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <span class="changeBtn" @click="changePassWord">[ 修改 ]</span>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="infoForm.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="生日">
            <el-date-picker
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              v-model="infoForm.birth"
              type="date"
              placeholder="请选择您的生日"
              @change="changeDate"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="单位名称">
            <el-input v-model="infoForm.company" placeholder="请输入单位名称"></el-input>
          </el-form-item>
          <el-form-item label="部门">
            <el-input v-model="infoForm.depart" placeholder="请输入所在部门"></el-input>
          </el-form-item>
          <el-form-item label="职务">
            <el-input v-model="infoForm.worker" placeholder="请输入您的职务"></el-input>
          </el-form-item>
          <el-form-item label="所在地区">
            <el-input v-model="infoForm.companyAddr" placeholder="请输入所在地区"></el-input>
          </el-form-item>
          <el-form-item label="个人简介">
            <el-input
              v-model="infoForm.userSignature"
              type="textarea"
              :rows="4"
              placeholder="个人简介，其他用户可见"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="btn_wrap">
          <el-button type="warning" @click="keep">保存</el-button>
        </div>
      </div>
    </div>
    <!-- 头像裁剪插件 -->
    <el-dialog :visible.sync="picVisible" width="600px">
      <div style="min-width: 840px;width:600px;">
        <div class="eleme">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :before-upload="beforeUpload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :auto-upload="true"
            :show-file-list="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取图片</el-button>
            <el-button
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload"
            >上传头像
            </el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </div>
        <div>
          <br/>
          <el-button type="primary" icon="el-icon-refresh-right" circle @click="rotateRight"></el-button>
          <el-button type="success" icon="el-icon-refresh-left" circle @click="rotateLeft"></el-button>
          <el-button type="danger" icon="el-icon-plus" circle @click="changeScale(1)"></el-button>
          <el-button type="warning" icon="el-icon-minus" circle @click="changeScale(-1)"></el-button>
        </div>
        <div class="cropper">
          <div class="cropper-content" style="margin-top:60px;margin-left:60px;">
            <div class="cropper">
              <vueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.size"
                :outputType="option.outputType"
                :info="true"
                :full="option.full"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :original="option.original"
                :autoCrop="option.autoCrop"
                :autoCropWidth="option.autoCropWidth"
                :autoCropHeight="option.autoCropHeight"
                :fixedBox="option.fixedBox"
                @realTime="realTime"
                @imgLoad="imgLoad"
              ></vueCropper>
            </div>
            <div style="margin-left:20px;">
              <div
                class="show-preview"
                :style="{'width': '150px', 'height':'155px',  'overflow': 'hidden', 'margin': '5px'}"
              >
                <div :style="previews.div" class="preview">
                  <img :src="previews.url" :style="previews.img"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {sso_modifyPwd} from "@/plugins/sso-login";

export default {
  data() {
    return {
      // 用户信息
      tel: '',
      infoForm: {},
      picVisible: false,
      headImg: "",
      //剪切图片上传
      crap: false,
      previews: {},
      option: {
        img: "",
        outputSize: 1, //剪切后的图片质量（0.1-1）
        full: false, //输出原图比例截图 props名full
        outputType: "png",
        canMove: true,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        autoCropWidth: 150,
        autoCropHeight: 150,
        fixedBox: true
      },
      fileName: "", //本机文件地址
      downImg: "#",
      imgFile: "",
      uploadImgRelaPath: "" //上传后的图片的地址（不带服务器域名）
    };
  },
  methods: {
    // 获取用户登陆手机
    currentUser() {
      this.$request.currentUser().then(res => {
        console.log("=======用户权限=======", res)
        if (res.status == 200) {
          this.tel = res.data.tel
        } else {
          this.requestError(res.status, res.message)
        }
      }, err => {
        console.log(err);
        this.requestFail(err);
      })
    },
    // 获取用户信息
    userInfo() {
      this.$request.userInfo().then(res => {
        // console.log(res);
        if (res.status == 200) {
          this.infoForm = res.data
          console.log(this.infoForm.sex);
          if (this.infoForm.birth == 0) {
            this.infoForm.birth = ''
          }
          this.infoForm.sex == 1
            ? (this.infoForm.sex = "男")
            : (this.infoForm.sex = "女");
        } else {
          this.requestError(res.status, res.message)
        }
      }, err => {
        console.log(err);
        this.requestFail(err);
      });
    },
    // eslint-disable-next-line no-unused-vars
    submitUpload(file) {
      // this.$refs.upload.submit();
      this.finish("blob");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
      //   let data = window.URL.createObjectURL(new Blob([file]));
      //   this.option.img = data;
    },
    beforeUpload(file) {
      console.log("上传文件");
      console.log(file);
      let data = window.URL.createObjectURL(new Blob([file]));
      this.fileName = file.name;
      this.option.img = data;
    },
    //放大/缩小
    changeScale(num) {
      console.log("changeScale");
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    //坐旋转
    rotateLeft() {
      console.log("rotateLeft");
      this.$refs.cropper.rotateLeft();
    },
    //右旋转
    rotateRight() {
      console.log("rotateRight");
      this.$refs.cropper.rotateRight();
    },
    //上传图片（点击上传按钮）
    finish(type) {
      console.log("finish");
      // eslint-disable-next-line no-unused-vars
      let _this = this;
      let formData = new FormData();
      console.log(formData);
      // 输出
      if (type === "blob") {
        this.$refs.cropper.getCropBlob(data => {
          console.log(data);
          let img = window.URL.createObjectURL(data);
          this.model = true;
          this.modelSrc = img;
          formData.append("file", data, this.fileName);
          console.log(img);
          this.$axios
            // eslint-disable-next-line no-undef
            .post(config.upLoadFileURL, formData, {
              contentType: false,
              processData: false,
              headers: {"Content-Type": "application/x-www-form-urlencoded"}
            })
            .then(response => {
              var res = response.data;
              if (res == "success") {
                console.log("上传成功！");
              }
            });
        });
      } else {
        console.log("asdas");
        this.$refs.cropper.getCropData(data => {
          this.model = true;
          this.modelSrc = data;
        });
      }
    },
    // 实时预览函数
    realTime(data) {
      console.log("realTime");
      this.previews = data;
    },
    imgLoad(msg) {
      console.log("imgLoad");
      console.log(msg);
    },
    // eslint-disable-next-line no-unused-vars
    changeDate(val) {
    },
    // 保存用户信息
    keep() {
      console.log(this.infoForm);
      this.infoForm.sex == '男'
        ? (this.infoForm.sex = 1)
        : (this.infoForm.sex = 2);
      this.$request.changeUserInfo(this.infoForm).then(res => {
        console.log(res);
        if (res.status == 200) {
          this.$message({
            message: '信息修改成功',
            type: 'success'
          });
        } else {
          this.requestError(res.status, res.message);
        }
        this.infoForm.sex == 1
          ? (this.infoForm.sex = '男')
          : (this.infoForm.sex = '女');
      }, err => {
        console.log(err);
        this.requestFail(err);
      });

    },
    // 修改密码
    changePassWord() {
      sso_modifyPwd()
    }
  },
  mounted() {
    this.userInfo();
    this.currentUser();
  }
};
</script>

<style scoped>
.info_breadcrumb {
  width: 100%;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 2px;
  color: #252627;
  background: #ffffff;
  line-height: 58px;
  padding-left: 20px;
}

.info_center {
  width: 100%;
  background: #ffffff;
  margin-top: 10px;
  padding: 32px;
}

.info_title {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 2px;
  color: #5c5c5c;
}

.info_title .state {
  margin-left: 65px;
}

.portrait {
  width: 100%;
  margin: 54px auto 30px auto;
}

.portrait .pic {
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  border: 1px solid #dbdbdb;
  box-shadow: #dbdbdb 0px 0px 10px;;
}

.portrait .pic img {
  width: 100%;
  height: auto;
}

.pic_hover {
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
  display: none;
  cursor: pointer;
}

.pic_hover p {
  text-align: center;
  line-height: 120px;
  font-size: 16px;
  color: #ffffff;
}

.portrait .pic:hover .pic_hover {
  display: block;
}

/* 头像裁剪 */
.cropper-content {
  min-width: 540px;
  display: flex;
}

.cropper {
  width: 260px;
  height: 260px;
}

.show-preview {
  flex: 1;
  -webkit-flex: 1;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
}

.preview {
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #cccccc;
  background: #cccccc;
  margin-left: 40px;
}

.cropper-content .show-preview .preview {
  margin-left: 0;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}

/* 基本信息修改 */
.info_alter {
  width: 678px;
}

.alter_title {
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 48px;
  letter-spacing: 2px;
  color: #5c5c5c;
}

.item_txt {
  color: #5c5c5c;
}

.changeBtn {
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #f67b14;
  cursor: pointer;
}

.el-input__inner {
  border: none !important;
}

.btn_wrap {
  text-align: center;
}
</style>
